<template>
  <div id="app">
    <div id="navbar" class="container-fluid">
        <div class="row navbar-top">
            <div class="col-sm-8 col-xs-8">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" v-on:click="switchRobot()" ><span v-bind:class="[started?'glyphicon glyphicon-ok':'glyphicon glyphicon-remove']"></span> Start </button>
                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-usd"></span></button>
                    <button type="button" class="btn btn-default price" v-on:click="getBalance()">{{balance}}</button>
                </div>
            </div>
            <div class="col-sm-4 col-xs-4 text-right">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button"  v-on:click="toggleSettingMenu()">
                        <span class="glyphicon glyphicon-cog"></span> Setting
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" v-bind:class="{'show':isOpenSetting}">
                        <li><a href="http://bigheadlyfa1.cloudapp.net:3000/deploy" target="_blank">Deploy Service</a></li>
                        <li><a href="http://bigheadlyfa1.cloudapp.net:3000/deploy-ui" target="_blank">Deploy UI</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="http://bigheadlyfa1.cloudapp.net:3000/order/export" target="_blank">Export</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="http://bigheadlyfa1.cloudapp.net:8080/vwin/#/" target="_blank">Home</a></li>
                        <li><a href="http://www.vwinchina.com" target="_blank">VWIN China</a></li>
                        <li><a href="http://www.okooo.com/livecenter/football/" target="_blank">Live</a></li>
                    </ul>
                </div>
                
                
            </div>
        </div>
        <div class="row navbar-tab">
            <div class="col-sm-12 col-xs-12">
                <router-link to="/" exact>Order</router-link>
                <router-link to="/agenda">Agenda</router-link>
                <router-link to="/log">Log</router-link>
            </div>
        </div>
    </div>
    <div id="content">
        <router-view :balance="balance"></router-view>
    </div>
    <div id="refresh">
        <a v-on:click.stop.prevent="refresh()" href=""><span class="glyphicon glyphicon-refresh"></span></a>
    </div>
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
    import service from '@/core/service'
    import eventBus from '@/core/eventBus'

    /* eslint-disable */
    var data = {
        started: true,
        balance: '--',
        isOpenSetting: false
    };
    export default {
        name: 'app',
        data() {
            return data;
        },
        created() {
            this.getBalance();
        },
        methods: {
            getBalance: function() {
                service.getProfile().then((d) => {
                    data.balance = d.d[3];
                });
            },
            switchRobot: function() {
                if (!this.started) {
                    service.startRobot();
                } else {
                    service.stopRobot();
                }
                this.started = !this.started;
            },
            startAutoBet: function() {
                service.startRobot();
                this.started = true;
            },
            stopAutoBet: function() {
                service.stopRobot();
                this.started = false;
            },
            toggleSettingMenu: function() {
                this.isOpenSetting = !this.isOpenSetting;
            },
            refresh: function() {
                var e = "";
                switch (this.$router.currentRoute.path) {
                    case '/agenda':
                        e = 'refreshAgenda';
                        break;
                    case '/log':
                        e = 'refreshLog';
                        break;
                    default:
                        e = 'refreshOrder';
                }
                eventBus.$emit(e, this.$router.currentRoute);
            }
        }
    }
</script>

<style>
    @import './assets/lib/bootstrap/css/bootstrap.min.css';
    body {
        /*padding-top: 70px;*/
    }
    
    #loading {
        position: fixed;
        height: 4px;
        border-radius: 0;
        z-index: 9999;
        width: 100%;
        top: 0px;
    }
    
    #refresh {
        position: fixed;
        z-index: 999;
        bottom: 30px;
        right: 30px;
    }
    
    #refresh a {
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
        background: #63ACDD;
        text-align: center;
        border-radius: 100%;
        display: block;
        width: 60px;
        height: 60px;
        line-height: 64px;
        font-size: 20px;
        color: #fff;
    }
    
    #refresh a:active {
        background: #aaa;
    }
    
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }
    
    #navbar {
        top: 0;
        position: fixed;
        z-index: 99;
        width: 100%;
        background: #eee;
    }
    
    #content {
        margin-top: 102px;
    }
    
    .price {
        /*font-size: 15px;*/
        color: #666;
    }
    
    #navbar .navbar-tab {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    
    #navbar .navbar-tab a {
        color: #333;
        text-decoration: none;
        padding: 15px 15px;
        line-height: 20px;
        display: inline-block;
    }
    
    #navbar .navbar-tab a.active {
        background: #ddd;
    }
    
    #navbar .navbar-top {
        padding: 8px 0;
    }
</style>